<template>
	<wd-tabs v-model="tab" @click="handleClick">
		<block v-for="(item,index) in tabs" :key="index">
			<wd-tab :title="item"></wd-tab>
		</block>
	</wd-tabs>
	<wd-fab v-if="tab==0" v-model:active="show" :draggable="true" @click="onFad" :expandable="false"></wd-fab>
	<wd-fab v-if="tab==1" v-model:active="showUser" :draggable="true" @click="onFad2" :expandable="false"></wd-fab>
	<!-- 群组消息 -->
	<scroll-view class="scrollView" scroll-y @scrolltolower="onBottom" v-if="tab==0">
		<view class="group-container">
			<view v-for="(item,index) in groupRecord" :key="index" class="item">
				<view class="">
					<view class="">
						<image class="avatar" :src="item.avatar" ></image>
						<text>{{item.from}}</text>
					</view>
					<text>{{timestampToTime(item.sendtime)}}</text>
				</view>
				<wd-img class="content-img" :width="100" v-if="item.type==1" :src="item.mb.url" mode="widthFix" :enable-preview="true" />

				<text class="content" v-if="item.type==0">{{item.mb.msg}}</text>
			</view>
		</view>
	</scroll-view>
	<!-- 单聊消息 -->
	<scroll-view class="scrollView" scroll-y @scrolltolower="onBottomUser" v-if="tab==1">
		<view class="group-container">
			<view v-for="(item,index) in userRecord" :key="index" class="item">
				<view class="">
					<view class="">
						<!-- <image class="avatar" :src="item.avatar" ></image> -->
						<text>{{item.from}}</text>
					</view>
					<text>{{timestampToTime(item.sendtime)}}</text>
				</view>
				<wd-img class="content-img" :width="100" v-if="item.type==1" :src="item.url" mode="widthFix" :enable-preview="true" />
					
				<text class="content" v-if="item.type==0">{{item.msg}}</text>
				
			</view>
		</view>
	</scroll-view>
	<wd-popup v-model="show" position="top" :close-on-click-modal="false"  >
		<view class="form-box">
			<wd-form ref="form" :model="groupParams">
			  <wd-cell-group border>
			    <wd-input
			      label="群ID"
			      label-width="100px"
			      prop="groupId"
			      clearable
			      v-model="groupParams.groupId"
			      placeholder="请输入群ID"
			      :rules="[{ required: true, message: '请填写群ID' }]"
			    />
			    <wd-calendar label="开始时间" type="datetime" v-model="groupParams.startTime" @confirm="handleConfirm"
				 :rules="[{ required: true, message: '请选择开始时间' }]"/>
				<wd-calendar  label="结束时间" type="datetime" v-model="groupParams.endTime" @confirm="handleConfirm2" 
				 :rules="[{ required: true, message: '请选择结束时间' }]"/>
			
			  </wd-cell-group>
			  <view class="footer">
			    <wd-button type="primary" size="large" style="width: 350rpx;" @click="getGroupRecord" block>提交</wd-button>
			  </view>
			</wd-form>
		</view>
	</wd-popup>
	<wd-popup v-model="showUser" position="top" :close-on-click-modal="false" >
		<view class="form-box">
			<wd-form ref="form" :model="userParams">
			  <wd-cell-group border>
			    <wd-input
			      label="用户1id"
			      label-width="100px"
			      prop="accId1"
			      clearable
			      v-model="userParams.accId1"
			      placeholder="请输入用户ID"
			      :rules="[{ required: true, message: '请填写用户ID' }]"
			    />
				<wd-input
				  label="用户2id"
				  label-width="100px"
				  prop="accId2"
				  clearable
				  v-model="userParams.accId2"
				  placeholder="请输入用户ID"
				  :rules="[{ required: true, message: '请填写用户ID' }]"
				/>
			    <wd-calendar label="开始时间" type="datetime" v-model="userParams.startTime" @confirm="handleConfirm3"
				 :rules="[{ required: true, message: '请选择开始时间' }]"/>
				<wd-calendar  label="结束时间" type="datetime" v-model="userParams.endTime" @confirm="handleConfirm4" 
				 :rules="[{ required: true, message: '请选择结束时间' }]"/>
			
			  </wd-cell-group>
			  <view class="footer">
			    <wd-button type="primary" size="large" style="width: 350rpx;" @click="getUserRecord" block>提交</wd-button>
			  </view>
			</wd-form>
		</view>
	</wd-popup>

</template>

<script setup>
	// import ref from 'vue'
	const baseUrl = 'https://api.mixin6.com/api'
	// const baseUrl = '/api'
	import {
		onMounted,
		reactive,
		ref
	} from "vue";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import { useMessage } from '@/uni_modules/wot-design-uni'
	const messageBox = useMessage()
	const tab = ref(0)
	const token = ref()
	const tabs = ref(['群聊记录', '指定用户记录'])
	onLoad((opt)=>{
		token.value = opt.token
		groupParams.value.token = token.value
		userParams.value.token = token.value
		console.log(token.value)
	})
	const groupParams = ref({
		page: 1,
		limit: 20,
		groupId: '',
		startTime: "",
		endTime: "",
		token:""
	})
	const userParams = ref({
		page: 1,
		limit: 20,
		accId1: '',
		accId2: '',
		startTime: "",
		endTime: "",
		token:""
	})
	const show =ref(false)
	const showUser = ref(false)
	const groupRecord= ref([])
	const userRecord = ref([])
	const handleClick = (e) => {
		if (tab.value === 0) {
			if(groupParams.value.endTime&&groupParams.value.startTime&&groupParams.value.groupId){
				getGroupRecord()
			}
			
			
		} else {
			if(userParams.value.accId1&&userParams.value.startTime&&userParams.value.groupId&&userParams.value.accId2){
				getUserRecord()
			}
			
		}
	}
	
	const onFad = (e)=>{
		
		show.value = !show.value
	}
	const onFad2 = ()=>{
		showUser.value = !showUser.value
	}
	const onBottom = () => {
		groupParams.value.page++
		getGroupRecord()
	}
	const onBottomUser = ()=>{
		userParams.value.page++
		getUserRecord()
	}
	onMounted(() => {
		// getGroupRecord()
	})
	const getGroupRecord = () => {
		
		uni.request({
			url: baseUrl+'/user/yxGroupRecord',
			method: 'POST',
			header: {
				'token': token.value,
				"content-type":'application/x-www-form-urlencoded'
			},
			data: groupParams.value,
			
			success: (res) => {
				
				if(res.statusCode !=200){
					uni.showModal({
						title:'错误提示',
						content:res.data.message
					})
					
					return false
				}
				res.data.data.forEach(item=>{
					item.mb = JSON.parse(item.body)
				})
				if(groupParams.value.page==1){
					groupRecord.value = res.data.data
				}else{
					groupRecord.value = groupRecord.value.concat(res.data.data)
				}
				show.value = false
			}
		})
	}
	const getUserRecord = () => {
		uni.request({
			url: baseUrl+'/user/yxPrivateRecord',
			method: 'POST',
			header: {
				'token': token.value,
				"content-type":'application/x-www-form-urlencoded'
			},
			data: userParams.value,
			success: (res) => {
				
				if(res.statusCode !=200){
					uni.showModal({
						title:'错误提示',
						content:res.data.message
					})
					
					return false
				}
				// res.data.data.forEach(item=>{
				// 	item.mb = JSON.parse(item.body)
				// })
				if(userParams.value.page==1){
					userRecord.value = res.data.data
				}else{
					userRecord.value = userRecord.value.concat(res.data.data)
				}
				showUser.value = false
			},
			fail: (err) => {
				console.log(err.response)
			}
		})
	}
	const  timestampToTime=(timestamp)=> {
	  var date = new Date(timestamp); // 注意要将时间戳转为毫秒
	  var year = date.getFullYear();
	  var month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
	  var day = date.getDate();
	  var hour = date.getHours();
	  var minute = date.getMinutes();
	  var second = date.getSeconds();
	 
	  var time = year + '年' + month + '月' + day + '日 ' + hour + ':' + minute + ':' + second;
	  return time;
	}
	const handleConfirm = (e)=>{
		
		groupParams.value.startTime = timestampToTime2(e.value)
	}
	const handleConfirm2 = (e)=>{
		
		groupParams.value.endTime = timestampToTime2(e.value)
	}
	const handleConfirm3 = (e)=>{
		
		userParams.value.startTime = timestampToTime2(e.value)
	}
	const handleConfirm4 = (e)=>{
		
		userParams.value.endTime = timestampToTime2(e.value)
	}
	const  timestampToTime2=(timestamp)=> {
	  var date = new Date(timestamp); // 注意要将时间戳转为毫秒
	  var year = date.getFullYear();
	  var month = date.getMonth() + 1; // 月份是从0开始的，所以要加1
	  var day = date.getDate();
	  var hour = date.getHours();
	  var minute = date.getMinutes();
	  var second = date.getSeconds();
	 
	  var time = year + '-' + rand(month) + '-' + rand(day) + ' ' + rand(hour) + ':' + rand(minute) + ':' + rand(second);
	  return time;
	}
	const rand = (n)=>{
		return n>9?n:'0'+n
	}
</script>

<style lang="scss">
	.form-box{
		padding-bottom: 30rpx;
		
		.footer{
			margin-top: 30rpx;
			display: flex;
			justify-content: center;
		}
	}
	.searchBox{
		width: 750rpx;
		height: 300rpx;
		background: red;
	}
	.scrollView {
		height: calc(100vh - 50px);
		.group-container{
			.item{
				margin: 30rpx;
			
				>view{
					display: flex;
					align-items: center;
					justify-content: space-between;
					>view{
						display: flex;
						align-items: center;
					}
					>text{
						font-size: 24rpx;
						color: #999;
					}
				}
				.avatar{
					border-radius: 50%;
					width: 80rpx;
					height: 80rpx;
					display: block;
					margin-right: 30rpx;
				}
				.content{
					// margin-top:30rpx;
					display: inline-block;
					max-width: 500rpx;
					background: #007aff;
					border-radius: 20rpx;
					padding: 20rpx;
					color: #fff;
					margin-left: 110rpx;
				}
				.content-img{
					// margin-top:30rpx;
					margin-left: 110rpx;
				}
			}
		}
		
	}
</style>